<template>
  <div class="">
  <Circle :percent="80">
    <span class="demo-Circle-inner" style="font-size:24px">80%</span>
  </Circle>
  <Circle :percent="100" stroke-color="#5cb85c">
    <Icon type="ios-checkmark-empty" size="60" style="color:#5cb85c"></Icon>
  </Circle>
  <Circle :percent="35" stroke-color="#ff5500">
        <span class="demo-Circle-inner">
            <Icon type="ios-close-empty" size="50" style="color:#ff5500"></Icon>
        </span>
  </Circle>
  </div>
</template>

<script>
export default {
  data () {
    return {
      list: '',
      radioValue: '',
      options: '',
      alertType: false
    }
  },
  methods: {
    radioClick (value) {
      const obj = JSON.parse(sessionStorage.getItem('options')) || {}
      obj.场景 = {value}
      sessionStorage.setItem('options', JSON.stringify(obj))
    },
    next (path) {
      if (this.radioValue !== '') {
        this.$router.push(path)
      } else {
        this.alertType = true
      }
    }
  },
  created () {
    this.list = JSON.parse(sessionStorage.getItem('requestData')).场景
    if (sessionStorage.getItem('options') && JSON.parse(sessionStorage.getItem('options')).场景) {
      this.radioValue = JSON.parse(sessionStorage.getItem('options')).场景.value
    }
  }
}
</script>

<style scoped lang="less">
  @import "../../lib/less/variable.less";
.topic-1{
  width: 100%;
  height: 100%;
  background: url("../../assets/img/home_slices/bgimage@2x.png") no-repeat center;
  position: absolute;
  top: 0;
  left: 0;
  button:0;
  right: 0;
  .content{
    width: 100%;
    margin: 0 auto;
    text-align: center;
    .pt(25);
    .bj{
      .h(333);
      background: url("../../assets/img/Q1_slices/Q1number@2x.png") no-repeat  center center;
      background-size:contain;
      background-clip: border-box;
      .pt(45);
      .title{
        p{
          .h(36);
          .lh(36);
          width: 78.14%;
          display: inline-block;
          background: url("../../assets/img/button_status/questionbg@2x.png") no-repeat center;
          background-size:contain;
          background-clip: border-box;
          .fs(15);
          color: #553317;
          font-weight: bold;
          font-family: PingFangSC;
          text-align: left;
          .pl(20);
        }
      }
    }
  }
  .info{
    width: 100%;
    ul{
      width: 100%;
      li{
        width: 100%;
        text-align: center;
        margin: auto;
        position: relative;
        .pt(10);
        input[type="radio"] {
          opacity: 0;
          width: 100%;
          .h(30);
          display: inline-block;
          position: absolute;
          left: 0;
          .bottom(5);
        }
        p{
          width: 69.33%;
          display: inline-block;
          .h(36);
          .lh(36);
          background: url("../../assets/img/button_status/optionbg_default@2x.png") no-repeat center;
          background-size:contain;
          background-clip: border-box;
          .fs(14);
          color: #553317;
          font-weight: bold;
          font-family: PingFangSC;
          text-align: left;
        }
        p.optionbg_click{
          background-image: url("../../assets/img/button_status/optionbg_click@2x.png");
        }
        span{
          vertical-align: top;
          .ml(20)
        }
      }

    }
  }
  .btn{
    width: 100%;
    position: relative;
    a{
      display: inline-block;
      text-align: center;
      .w(120);
      .h(60);
      background: url("../../assets/img/button_status/btn_next@2x.png") no-repeat center;
      background-size: contain;
      background-clip: border-box;
      position: absolute;
      left: 50%;
      .top(-30);
      .ml(-60);
    }
  }
  .bottom-img{
    width: 100%;
    .h(168);
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: url("../../assets/img/Q1_slices/bottomimage_Q1@2x.png")no-repeat bottom center;
    background-size: contain;
  }
  .alert{
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: rgba(0,0,0,0.7);
    z-index: 999;
    text-align: center;
    .alert_content{
      .w(282);
      .h(82);
      background: url("../../assets/img/button_status/window_bg@2x.png") no-repeat center;
      background-size:contain;
      background-clip: border-box;
      text-align: center;
      position: relative;;
      top: 30%;
      .left(51);
      p{
        width: 100%;
        .h(82);
        .fs(16);
        .lh(21);
        .pt(20);
      }
      span{
        img{
          .w(36);
          .h(36);
        }
        position: absolute;
        .right(-25);
        top: 0;
      }
    }
    .alert_bottom{
      width: 100%;
      position: relative;
      a{
        display: inline-block;
        text-align: center;
        .w(120);
        position: absolute;
        left: 0;
        .top(250);
        background: url("../../assets/img/button_status/btn_know@2x.png") no-repeat center;
        background-size: cover;
        .h(60);
        left: 50%;
        .ml(-60);
      }
    }
  }

  @media screen and (min-width: 750px) {
    .content{
      .bj{
        .title{
          p{
            .fs(14);
            .pl(80);
          }
        }
      }
    }
    .info{
      ul{
        li{
          p{
            .fs(14);
            .pl(50);
          }
          span{
          }
        }

      }
    }
    .btn{
      a{
        .top(-30);
        img{
          z-index: 10;
          width: 20%;
          object-fit: cover;
        }
      }
    }
    .alert{
      .alert_content{
        left: 50%;
        .ml(-141);
      }
      .alert_bottom{
        width: 100%;
        position: relative;
        a{
          img{
            width: 10%;
            object-fit: cover;
          }
        }
      }
    }
  }

}
</style>
